<template>
	<view class="container">
		<view class="top flex items-center justify-between" :style="[{ 'padding-top': topH + 'px' }]">
			<view class="left">
				购物车
				<text>({{ totalCount }})</text>
			</view>
			<view class="right" v-show="list.length > 0" @click="editOpen = editOpen ? false : true" :style="[{ 'padding-right': searchr + 'px' }]">
				{{ editOpen ? '完成' : '编辑' }}
			</view>
		</view>

		<view class="product" :style="[{ 'padding-top': 44 + topH + 'px' }]">
			<view class="show-load" v-if="showLoad" style="padding-top: 100rpx">
				<up-loading-icon text="加载中" textSize="13"></up-loading-icon>
			</view>

			<view class="item flex items-center" v-for="(item, index) in list" :key="index" v-if="list.length > 0">
				<image :src="changeIcon[item.change]" class="checkbox-icon" @click="change(index)"></image>
				<view class="info flex flex-1">
					<image :src="imgUrl + item.icon" class="icon"></image>
					<view class="tls flex flex-col justify-between flex-1">
						<view class="fast">
							<view class="title line-1-clamp">{{ item.title }}</view>
							<view class="spec" v-if="item.spec">
								<text>{{ item.spec }}</text>
							</view>
						</view>
						<view class="last flex items-center justify-between">
							<view class="price rmb">{{ item.vip_price }}</view>
							<up-number-box
								:disabledInput="true"
								v-model="list[index].num"
								:min="1"
								integer
								@change="numChange(index, item.id)"
								bgColor="#e7e8eb"
								inputBgColor="#f4f5f8"
								buttonRadius="50%"
							></up-number-box>
						</view>
					</view>
				</view>
			</view>
			<view v-else>
				<up-empty icon="/static/cart/ic_gwuczero@2x.png" iconSize="357rpx" marginTop="50%" text="购物车空空如也，去逛逛吧~" v-if="!showLoad" />
			</view>
		</view>

		<view class="footer flex items-center justify-between" v-if="list.length > 0">
			<view class="all flex items-center" @click="allChecked">
				<image :src="changeIcon[changeAll]" class="all-icon"></image>
				<text>全选</text>
			</view>
			<view class="total flex items-center" v-if="!editOpen">
				<view class="total-l flex flex-col justify-between items-end">
					<view class="total-v flex items-center">
						<view class="amount-text">合计：</view>
						<view class="amount rmb">{{ sum }}</view>
					</view>
					<view class="checked">已选{{ sumCount }}件</view>
				</view>
				<view class="total-r" @click="submitCart">去结算</view>
			</view>

			<view class="total flex items-center" v-else>
				<!-- <view class="total-r collect" @click="checkedIds.length > 0 ? (collectProductShowModal = true) : hint('请选择要收藏的商品')">移入收藏</view> -->
				<view class="total-r delete" @click="checkedIds.length > 0 ? (deleteShowModal = true) : hint('请选择要删除的商品')">删除</view>
			</view>
		</view>
	</view>
	<up-modal
		:show="deleteShowModal"
		@cancel="deleteShowModal = false"
		@confirm="deleteCart"
		ref="uModal"
		width="500rpx"
		:asyncClose="true"
		title="请确认"
		content="确定删除所选项？"
		:closeOnClickOverlay="true"
		contentTextAlign="center"
		:showCancelButton="true"
		confirmColor="#F81A2E"
	></up-modal>
	<up-modal
		:show="collectProductShowModal"
		@cancel="collectProductShowModal = false"
		@confirm="collectProduct"
		ref="uModal"
		width="500rpx"
		:asyncClose="true"
		title="请确认"
		content="确定要移入我的收藏吗？"
		:closeOnClickOverlay="true"
		contentTextAlign="center"
		:showCancelButton="true"
		confirmColor="#F81A2E"
	></up-modal>
</template>
<script setup>
	import { ref, inject, nextTick } from 'vue';
	import { port, imgUrl, goUrl, hint, loading, closeLoading } from '/service/port';

	import { onLoad, onShow } from '@dcloudio/uni-app';

	import { useTitleStore } from '@/stores/title';
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: useTitleStore().globalTitle
		});
	});

	const searchr = ref(0);
	const topH = ref(0);
	onShow(() => {
		// #ifdef MP-WEIXIN
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top;
		searchr.value = menuInfo.width + 25;
		// #endif
		changeAll.value = 0;
		checkedIds.value.length = 0;
		getCart();
	});
	const deleteShowModal = ref(false);
	const collectProductShowModal = ref(false);
	const editOpen = ref(false);
	const list = ref([]);
	const changeIcon = ['/static/cart/ic_gwcweix@2x.png', '/static/cart/ic_gwcyixz.png'];
	const changeAll = ref(0);
	const checkedIds = ref([]);
	const sum = ref(0);
	const sumCount = ref(0);
	const totalCount = ref(0);
	const showLoad = ref(true);

	async function getCart() {
		let res = await port('getCart');
		list.value =
			res.data.length > 0
				? res.data.map((i) => {
						i.change = 0;
						totalCount.value += i.num;
						return i;
				  })
				: [];

		showLoad.value = false;
	}
	function allChecked() {
		let op = changeAll.value == 1 ? 0 : 1;
		changeAll.value = op;
		list.value = list.value.map((i) => {
			i.change = op;
			if (i.change == 1) {
				checkedIds.value.push(i.id);
			}
			return i;
		});
		if (op == 1) {
			compute();
		} else {
			sum.value = 0;
			sumCount.value = 0;
			checkedIds.value.length = 0;
		}
	}

	function compute() {
		let t = 0,
			c = 0;
		list.value.map((i) => {
			if (i.change == 1) {
				t += parseInt(i.num) * parseFloat(i.vip_price);
				c += parseInt(i.num);
			}
		});
		sum.value = t;
		sumCount.value = c;
	}

	async function submitCart() {
		if (!checkedIds.value.length) {
			hint('请选择要结算的商品');
			return false;
		}
		loading();
		let res = await port('submitCart', { cart_id: checkedIds.value.join(',') });
		setTimeout(() => {
			closeLoading();
			goUrl('/pages/order/index');
		}, 200);
	}

	async function deleteCart() {
		let res = await port('editCart', { type: 3, id: checkedIds.value.join(',') });
		setTimeout(() => {
			deleteShowModal.value = false;
			hint(res.msg);
			sum.value = 0;
			sumCount.value = 0;
			checkedIds.value.length = 0;
			editOpen.value = false;
			changeAll.value = 0;
			getCart();
		}, 200);
	}

	async function collectProduct() {
		let res = await port('collectProduct', { id: checkedIds.value.join(','), status: 1 });
		await nextTick();
		collectProductShowModal.value = false;
		hint(res.msg);

		await port('editCart', { type: 3, id: checkedIds.value.join(',') });

		checkedIds.value.length = 0;
		changeAll.value = 0;
		sum.value = 0;
		sumCount.value = 0;
		totalCount.value = 0;
		getCart();
	}

	async function change(index) {
		if (list.value[index].change == 1) {
			checkedIds.value.splice(checkedIds.value.indexOf(list.value[index].id), 1);
		} else {
			checkedIds.value.push(list.value[index].id);
		}
		list.value[index].change = list.value[index].change == 1 ? 0 : 1;
		await nextTick();
		changeAll.value = checkedIds.value.length == list.value.length ? 1 : 0;
		compute();
	}

	async function numChange(index, id) {
		await nextTick();
		await port('editCart', { type: 5, id: id, num: list.value[index].num });
		compute();
	}
</script>
<style scoped lang="scss">
	:global(page) {
		background-color: #f4f5f8;
	}
	:deep(.u-number-box) {
		background-color: #f4f5f8;
		border-radius: 50% / 120rpx;
	}

	.footer {
		position: fixed;
		// #ifdef H5
		bottom: 114rpx;
		// #endif

		// #ifdef MP-WEIXIN
		bottom: 0;
		// #endif
		width: calc(100% - 60rpx);
		background: #ffffff;
		box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
		padding: 13rpx 30rpx;

		.all {
			.all-icon {
				width: 42rpx;
				height: 42rpx;
			}
			> text {
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				margin-left: 14rpx;
			}
		}
		.total {
			.total-l {
				margin-right: 20rpx;
				.total-v {
					.amount-text {
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
					}
					.rmb:before {
						font-size: 26rpx;
					}
					.amount {
						color: #fb3204;
						font-size: 32rpx;
					}
				}
				.checked {
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}
			}
			.total-r {
				font-weight: 500;
				font-size: 30rpx;
				color: #ffffff;
				background: $theme-bg-btn-color;
				border-radius: 36rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				padding: 0 50rpx;
			}
			.collect {
				font-weight: 500;
				height: 70rpx;
				line-height: 70rpx;
				color: #888888;
				background: #fff;
				border: 1rpx solid #cccccc;
			}

			.delete {
				font-weight: 500;
				height: 70rpx;
				line-height: 70rpx;
				color: $theme-color;
				background: #fff;
				border: 1rpx solid $theme-color;
				margin-left: 20rpx;
			}
		}
	}

	.container {
		padding-bottom: 220rpx;
		.top {
			position: fixed;
			top: 0;
			height: 88rpx;
			line-height: 88rpx;
			width: calc(100% - 60rpx);
			padding: 0 30rpx;
			z-index: 100;
			background: #ffffff;
			.left {
				font-weight: 500;
				font-size: 36rpx;
				color: #000000;
				> text {
					margin-left: 5rpx;
					font-size: 26rpx;
				}
			}
		}
		.product {
			.item {
				margin: 24rpx 0;
				background: #ffffff;
				border-radius: 30rpx;
				padding: 30rpx;
				.checkbox-icon {
					width: 42rpx;
					height: 42rpx;
				}

				.info {
					margin-left: 20rpx;
					.icon {
						width: 188rpx;
						height: 188rpx;
						border-radius: 10rpx;
					}
					.tls {
						margin-left: 22rpx;
						.fast {
							.title {
								font-weight: 400;
								font-size: 26rpx;
								color: #000000;
							}
							.spec {
								font-weight: 400;
								font-size: 22rpx;
								border-radius: 6rpx;
								margin-top: 15rpx;
								> text {
									color: #888888;
									background: #f6f6f6;
									padding: 5rpx 13rpx;
								}
							}
						}
						.last {
							.price {
								font-weight: 500;
								font-size: 36rpx;
								color: #fb3204;
							}
							.rmb:before {
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
